<!DOCTYPE html>
<html lang="{{ site.lang | default: "zh-cmn-Hans" }}">
  <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
    <link rel="bookmark"  type="image/x-icon"  href="/favicon.ico"/>
    <link rel="shortcut icon" href="/favicon.ico">

{% seo %}
  </head>

  <body>

    <header>
      <div class="container">
        <h1>{{ page.title }}</h1>
        <h2>{{ page.collection }}</h2>

      </div>
    </header>

    <div class="container" >
      <section id="main_content">
        {{ content }}
      </section>

      <div class="split_line"></div>
      <section id="gitalk-container"></section>
    </div>

    <!-- 背景特效 -->
    <script type="text/javascript" color="181,232,83" opacity='0.7' zIndex="-2" count="200" src="/static/js/src/canvas-nest.js"></script>

    {% if site.gitalk.repo %}
    <!-- gitalk -->
    <!-- <link rel="stylesheet" href="/static/css/src/gitment.css">
    <script src="/static/js/src/gitment.browser.js"></script> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
    <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
    <script>
        var gitalk  = new Gitalk({
                clientID: '{{site.gitalk.client_id}}',
                clientSecret: '{{site.gitalk.client_secret}}',
                owner: '{{ site.gitalk.owner }}',
                admin: ['{{ site.gitalk.owner }}'],
                repo: '{{site.gitalk.repo}}',
                id: '{{ page.collection }}/{{page.title}}',
                distractionFreeMode: false,
            });
        gitalk.render('gitalk-container')
    </script>
    {% endif %}


    {% if page.title == 'second_week' %}
    <!--  应付蹩脚的 Mastering Markdown  -->
    <style type="text/css">
      .highlighter-rouge div{
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 40px;
        margin-inline-end: 40px;
        color: #aaa;
        padding-left: 10px;
        border-left: 1px dotted #666;
      }

      blockquote p img {
        max-width: 40%;
      }

    </style>
    <script>
      var codes = document.getElementsByClassName("language-C");
      for(var i=0;i<codes.length ;i++){
        codes[i].parentElement.outerHTML = "<blockquote>"+ codes[i].parentElement.outerHTML +"</blockquote>";
      }
    </script>
    {% endif %}



  </body>
</html>
